<.subheader>
  <:path>
    ~/<.subheader_path_link live_patch to={~p"/alerts"} team={@team}>alerts</.subheader_path_link>
  </:path>
  <.render_docs_link {assigns} />
  <.render_access_tokens_link {assigns} />
</.subheader>

<div class="tw-p-4 lg:tw-max-w-[50%] tw-mx-auto">
  <h3 class="tw-text-white">Logflare Alerts</h3>
  <p>
    Logflare Alerts are scheduled queries that run against your sources.
    With Alerts, you can set up complex queries to notify you of specific events or criteria.
  </p>

  <div class="tw-flex tw-gap-4 tw-items-center">
    <a href="https://docs.logflare.app/alerts" target="_blank">Documentation</a>
    <.team_link patch={~p"/alerts/new"} team={@team}>
      <.button variant="primary">
        New alert
      </.button>
    </.team_link>
  </div>
</div>

<section class="mx-auto container">
  <ul :for={alert <- Enum.sort_by(@alerts, & &1.name)} class="list-group">
    <li class="list-group-item">
      <.team_link team={@team} patch={~p"/alerts/#{alert.id}"} class="tw-text-white">{alert.name}</.team_link>
      <span class="tw-block tw-text-sm">uuid: {alert.token}</span>
      <p :if={alert.description} class="tw-pb-0 tw-mb-0 tw-text-sm text-muted">
        {alert.description}
      </p>
    </li>
  </ul>
</section>
